import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react';
import { BorderBox11, FlylineChartEnhanced, BorderBox10, ScrollBoard, ScrollRankingBoard, ActiveRingChart } from '@jiaminghi/data-view-react';
import { mockProductList } from '../../mock/product';
import { mockShopList } from '../../mock/shoplist';
import mapImg from './img/map.png';
import mapCenterPointImg from './img/mapCenterPoint.png';
import mapPointImg from './img/mapPoint.png';
import ReactECharts from 'echarts-for-react';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';

// 定义 CSS 变量
const CSS_VARIABLES = {
  PRIMARY_COLOR: '#00ffff',
  SECONDARY_COLOR: '#37a2da',
  BACKGROUND_COLOR: 'rgba(0, 32, 64)',
  BORDER_COLOR: 'rgba(0, 200, 255, 0.3)',
};

const getScreenType = (width: number) => {
  if (width < 768) return 'small';
  if (width < 1200) return 'medium';
  return 'large';
};

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
};

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
}

interface Shop {
  id: string;
  name: string;
  price: number;
  // 如有其他字段请补充
}

interface MapPoint {
  name: string;
  coordinate: number[];
  icon: { src: string; width: number; height: number };
  halo?: { show: boolean; color: string };
}

const Datavisualization = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const windowSize = useWindowSize();
  const screenType = getScreenType(windowSize.width);
  const isSmall = screenType === 'small';
  const isMedium = screenType === 'medium';
  const [isFullscreen, setIsFullscreen] = useState(false);

  // Simulate real-time data updates
  const [data, setData] = useState({
    productData: mockProductList.list,
    shopData: mockShopList.list
  });

  // 使用 useCallback 优化数据更新函数
  const updateData = useCallback(() => {
    setData(() => ({
      productData: mockProductList.list.map((product: Product) => ({
        ...product,
        price: Math.floor(Math.random() * 1000) + 100
      })),
      shopData: mockShopList.list.map((shop: Shop) => ({
        ...shop,
        price: Math.floor(Math.random() * 10000) + 1000
      }))
    }));
  }, []);

  useEffect(() => {
    const interval = setInterval(updateData, 3000);
    return () => clearInterval(interval);
  }, [updateData]);

  // Map chart configuration with animation
  const mapConfig = useMemo(() => {
    const aspectRatio = windowSize.width / windowSize.height;

    const adjustCoordinate = (coord: number[], index: number) => {
      if (aspectRatio > 1.5 && index === 1) {
        return coord[index] * (1 / aspectRatio) + (1 - 1 / aspectRatio) / 2;
      }
      if (aspectRatio < 0.75 && index === 0) {
        return coord[index] * aspectRatio + (1 - aspectRatio) / 2;
      }
      return coord[index];
    };

    const points: MapPoint[] = [
      { name: '郑州', coordinate: [0.52, 0.35], icon: { src: mapCenterPointImg, width: 30, height: 30 } },
      { name: '新乡', coordinate: [0.52, 0.25], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '焦作', coordinate: [0.45, 0.25], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '开封', coordinate: [0.62, 0.35], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '许昌', coordinate: [0.52, 0.45], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '平顶山', coordinate: [0.45, 0.52], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '洛阳', coordinate: [0.35, 0.35], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '周口', coordinate: [0.68, 0.48], icon: { src: mapPointImg, width: 20, height: 20 }, halo: { show: true, color: '#8378ea' } },
      { name: '漯河', coordinate: [0.55, 0.52], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '南阳', coordinate: [0.35, 0.65], icon: { src: mapPointImg, width: 20, height: 20 }, halo: { show: true, color: '#37a2da' } },
      { name: '信阳', coordinate: [0.62, 0.78], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '驻马店', coordinate: [0.55, 0.65], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '济源', coordinate: [0.38, 0.22], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '三门峡', coordinate: [0.25, 0.35], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '商丘', coordinate: [0.75, 0.35], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '鹤壁', coordinate: [0.55, 0.18], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '濮阳', coordinate: [0.65, 0.18], icon: { src: mapPointImg, width: 20, height: 20 } },
      { name: '安阳', coordinate: [0.58, 0.12], icon: { src: mapPointImg, width: 20, height: 20 } }
    ];

    const adjustedPoints = points.map((point: MapPoint) => ({
      ...point,
      coordinate: [
        adjustCoordinate(point.coordinate, 0),
        adjustCoordinate(point.coordinate, 1)
      ]
    }));

    return {
      points: adjustedPoints,
      lines: [
        { source: '郑州', target: '新乡', color: '#00ffff' },
        { source: '郑州', target: '焦作', color: '#00ffff' },
        { source: '开封', target: '郑州', color: '#00ffff' },
        { source: '郑州', target: '周口', color: '#fb7293' },
        { source: '郑州', target: '南阳', color: '#fb7293' },
        { source: '郑州', target: '济源', color: '#00ffff' },
        { source: '郑州', target: '三门峡', color: '#00ffff' },
        { source: '郑州', target: '商丘', color: '#00ffff' },
        { source: '郑州', target: '鹤壁', color: '#00ffff' },
        { source: '郑州', target: '濮阳', color: '#00ffff' },
        { source: '郑州', target: '安阳', color: '#00ffff' },
        { source: '新乡', target: '安阳', color: '#00ffff' },
        { source: '焦作', target: '济源', color: '#00ffff' },
        { source: '开封', target: '商丘', color: '#00ffff' },
        { source: '郑州', target: '许昌', color: '#00ffff' },
        { source: '郑州', target: '信阳', color: '#00ffff' },
        { source: '郑州', target: '驻马店', color: '#00ffff' },
        { source: '郑州', target: '鹤壁', color: '#00ffff' },
        { source: '郑州', target: '洛阳', color: '#00ffff' }
      ],
      k: isSmall ? 0.3 : isMedium ? 0.4 : 0.5,
      bgImgSrc: mapImg,
      line: {
        width: isSmall ? 1 : isMedium ? 1.5 : 2,
        orbitColor: 'rgba(103,224,227,0.2)',
        flylineColor: 'rgba(0,255,255,0.5)',
        flylineStyle: {
          type: 'solid',
          width: 2,
          color: CSS_VARIABLES.PRIMARY_COLOR,
          shadowColor: CSS_VARIABLES.PRIMARY_COLOR,
          shadowBlur: 10
        },
        flylineTime: 2000,
        flylineLength: 0.2,
        flylineInterval: 1000,
        flylineCurve: 0.5,
        flylineDirection: 'outward',
        animation: {
          type: 'spread',
          duration: 2000,
        }
      },
      text: {
        show: true,
        fontSize: Math.max(12, Math.min(16, windowSize.width / 80)),
        offset: [0, Math.max(15, Math.min(25, windowSize.height / 40))]
      },
      centerPoint: {
        show: true,
        color: CSS_VARIABLES.PRIMARY_COLOR,
        radius: 10,
        halo: {
          show: true,
          color: [CSS_VARIABLES.PRIMARY_COLOR, CSS_VARIABLES.SECONDARY_COLOR, '#8378ea'],
          radius: 20,
          duration: 2000
        }
      },
      animation: {
        type: 'flyline',
        duration: 2000,
        interval: 3000
      }
    };
  }, [windowSize]);

  // ScrollBoard configuration using product data with animation
  const scrollBoardConfig = useMemo(() => {
    return {
      style: {
        fontSize: isSmall ? 14 : isMedium ? 16 : 20,
        fontWeight: 700,
        color: '#fff',
        lineHeight: isSmall ? 1.5 : 2,
        letterSpacing: 1,
        borderRadius: isSmall ? 12 : isMedium ? 16 : 22,
        transition: 'all 0.3s ease-in-out',
        overflow: 'hidden' // 防止内容溢出
      },
      config: {
        header: ['ID', '名称', '价格', '描述'],
        data: data.productData.map((product: Product) => [
          product.id,
          product.name,
          product.price,
          product.description
        ]),
        rowNum: isSmall ? 3 : isMedium ? 5 : 7,
        waitTime: 2000,
        carousel: 'single',
        align: ['center', 'center', 'center'],
        headerBGC: 'linear-gradient(90deg, #00eaff 0%, #3a8dde 100%)',
        oddRowBGC: 'rgba(0,32,64,0.26)',
        evenRowBGC: 'rgba(0,64,128,0.18)',
        headerHeight: isSmall ? 30 : 40
      },
      containerStyle: {
        width: isSmall ? '200px' : isMedium ? '250px' : '300px',
        height: isSmall ? '250px' : isMedium ? '300px' : '350px',
        transition: 'all 0.3s ease-in-out',
        overflow: 'hidden' // 防止内容溢出
      }
    };
  }, [windowSize, data.productData]);

  // ActiveRingChart configuration with animation
  const activeRingChartConfig = useMemo(() => {
    // 修改为动态获取最新数据（原为固定取前5条）
    const ringData = data.shopData
      .slice(0, isSmall ? 4 : isMedium ? 5 : 6) // 根据屏幕尺寸动态调整显示数量
      .map((item: Shop) => ({
        name: item.name,
        value: item.price
      }));
  
    return {
      // 添加实时更新相关配置
      animationDuration: isSmall ? 1000 : isMedium ? 1500 : 2000,
      animationEasing: 'cubicOut',
      animationType: 'expansion',
      updateInterval: 3000, // 与数据更新间隔同步
      
      // 保持原有配置
      fontSize: isSmall ? 12 : isMedium ? 14 : 16,
      containerStyle: {
        width: isSmall ? '220px' : isMedium ? '260px' : '320px',
        height: isSmall ? '180px' : isMedium ? '220px' : '280px',
        transition: 'all 0.3s ease-in-out' // 添加过渡效果
      },
      padding: isSmall ? '8px' : isMedium ? '12px' : '16px',
      borderRadius: isSmall ? '12px' : isMedium ? '16px' : '20px',
      // 配置环形图的数据
      data: ringData, 
      text: {
        fontSize: Math.max(12, Math.min(16, windowSize.width / 80)),
      },
      animation: {
        duration: isSmall ? 1000 : isMedium ? 1500 : 2000,
      },
      // 可以添加更多配置项，如颜色等
      color: ['#00ffff', '#37a2da', '#8378ea', '#fb7293', '#ff9f7f'], 
    };
  }, [windowSize, data.shopData, isSmall, isMedium]);

  // ScrollRankingBoard configuration using shoplist data with animation
  const scrollRankingBoardConfig = useMemo(() => {
    return {
      style: {
        fontSize: isSmall ? 12 : isMedium ? 14 : 16,
        color: '#fff',
        borderRadius: isSmall ? 8 : isMedium ? 12 : 16,
        transition: 'all 0.3s ease-in-out',
        paddingBottom: '40px',
        overflow: 'hidden' // 防止内容溢出
      },
      config: {
        data: data.shopData.slice(0, isSmall ? 3 : isMedium ? 5 : 7).map((item: Shop) => ({
          name: item.name,
          value: item.price,
          // 添加自适应文本处理
          nameStyle: {
            fontSize: Math.max(12, Math.min(16, windowSize.width / 100)),
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            maxWidth: windowSize.width * 0.15
          },
          valueStyle: {
            fontSize: Math.max(14, Math.min(18, windowSize.width / 90))
          }
        })),
        rowNum: isSmall ? 3 : isMedium ? 4 : 5,
        // 添加响应式间隔
        interval: isSmall ? 3000 : isMedium ? 2500 : 2000,
        // 添加自适应高度计算
        rowHeight: Math.max(30, Math.min(50, windowSize.height / 20))
      },
      containerStyle: {
        width: isSmall ? '90%' : isMedium ? '80%' : '70%',
        height: isSmall ? '200px' : isMedium ? '260px' : '300px',
        transition: 'all 0.3s ease-in-out',
        // 添加动态边距
        margin: isSmall ? '8px' : '12px'
      }
    };
  }, [windowSize, data.shopData, isSmall, isMedium]);

  // Styled components
  const styles = {
    baseContainer: {
      width: '100%',
      height: '100%',
      backgroundColor: CSS_VARIABLES.BACKGROUND_COLOR,
      position: 'relative',
      overflow: 'hidden',
      padding: '20px',
      boxSizing: 'border-box',
    },

    mapContainer: (windowSize: { width: number; height: number }, isFullscreen: boolean) => ({
      position: 'absolute' as const,
      top: isFullscreen ? '50%' : '50%',
      left: isFullscreen ? '50%' : '52%',
      transform: 'translate(-50%, -50%)',
      width: isFullscreen 
        ? `${Math.min(windowSize.width * 0.52, 1000)}px`
        : windowSize.width < 468 ? '40%' : windowSize.width < 1200 ? '50%' : '40%',
      height: isFullscreen
        ? `${Math.min(windowSize.height * 0.62, 700)}px`
        : windowSize.height < 468 ? '55%' : windowSize.height < 1024 ? '60%' : '45%',
      minWidth: '250px',
      minHeight: '150px',
      maxWidth: isFullscreen ? '1000px' : '800px',
      maxHeight: isFullscreen ? '700px' : '500px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1,
      borderRadius: '10px',
      backdropFilter: 'blur(5px)',
      transition: 'all 0.3s ease-in-out'
    }),

    mapChart: {
      width: '100%',
      height: '100%',
      borderRadius: '5px',
    },

    scrollBoardContainer: (isSmall: boolean, isMedium: boolean, isFullscreen: boolean) => ({
      position: 'absolute' as const,
      top: isFullscreen ? '5%' : isSmall ? '40px' : '40px',
      left: isFullscreen ? '2%' : isSmall ? '20px' : isMedium ? '30px' : '20px',
      width: isFullscreen 
        ? `${Math.min(windowSize.width * 0.25, 400)}px`
        : isSmall ? '300px' : isMedium ? '250px' : '320px',
      height: isFullscreen
        ? `${Math.min(windowSize.height * 0.3, 300)}px`
        : isSmall ? '200px' : isMedium ? '150px' : '180px',
      zIndex: 2,
      transition: 'all 0.3s ease-in-out',
      overflow: 'hidden'
    }),

    scrollBoardBox: (isSmall: boolean, isMedium: boolean) => ({
      width: '100%',
      height: '100%',
      padding: isSmall ? '8px' : isMedium ? '10px' : '10px',
      boxSizing: 'border-box',
      borderRadius: isSmall ? '8px' : isMedium ? '10px' : '12px',
      backdropFilter: 'blur(10px)',
      border: `1px solid ${CSS_VARIABLES.BORDER_COLOR}`,
      transition: 'all 0.3s ease-in-out',
      overflow: 'hidden' // 防止内容溢出
    }),

    activeRingContainer: (isSmall: boolean, isMedium: boolean, isFullscreen: boolean) => ({
      position: 'absolute' as const,
      top: isFullscreen ? '5%' : isSmall ? '40px' : '40px',
      right: isFullscreen ? '5%' : isSmall ? '20px' : isMedium ? '30px' : '20px',
      width: isFullscreen
        ? `${Math.min(windowSize.width * 0.25, 400)}px`
        : isSmall ? '300px' : isMedium ? '350px' : '300px',
      height: isFullscreen
        ? `${Math.min(windowSize.height * 0.3, 300)}px`
        : isSmall ? '180px' : isMedium ? '220px' : '200px',
      zIndex: 2,
      transition: 'all 0.3s ease-in-out'
    }),

    activeRingBox: (config: { padding: string; borderRadius: string }) => ({
      width: '100%',
      height: '100%',
      padding: config.padding,
      boxSizing: 'border-box',
      borderRadius: config.borderRadius,
      backdropFilter: 'blur(10px)',
      border: `1px solid ${CSS_VARIABLES.BORDER_COLOR}`,
      transition: 'all 0.3s ease-in-out'
    }),

    activeRingChart: {
      width: '100%',
      height: '100%',
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
    },

    scrollRankingContainer: (isSmall: boolean, isMedium: boolean, isFullscreen: boolean) => ({
      position: 'absolute' as const,
      bottom: isFullscreen ? '5%' : isSmall ? '20px' : '20px',
      right: isFullscreen ? '5%' : isSmall ? '20px' : isMedium ? '30px' : '20px',
      width: isFullscreen
        ? `${Math.min(windowSize.width * 0.25, 400)}px`
        : isSmall ? '300px' : isMedium ? '350px' : '350px',
      height: isFullscreen
        ? `${Math.min(windowSize.height * 0.3, 300)}px`
        : isSmall ? '220px' : isMedium ? '260px' : '170px',
      zIndex: 2,
      transition: 'all 0.3s ease-in-out',
      overflow: 'hidden'
    }),

    scrollRankingBox: (isSmall: boolean, isMedium: boolean) => ({
      width: '100%',
      height: '100%',
      padding: isSmall ? '8px' : isMedium ? '12px' : '16px',
      boxSizing: 'border-box',
      borderRadius: isSmall ? '8px' : isMedium ? '12px' : '16px',
      backdropFilter: 'blur(10px)',
      border: `1px solid ${CSS_VARIABLES.BORDER_COLOR}`,
      transition: 'all 0.3s ease-in-out',
      overflow: 'hidden' // 防止内容溢出
    }),

    lineChartContainer: (isSmall: boolean, isMedium: boolean, isFullscreen: boolean) => ({
      position: 'absolute' as const,
      left: isFullscreen ? '200px' : isSmall ? '18%' : isMedium ? '18%' : '19%',
      top: isFullscreen ? '80%' : isSmall ? '50%' : isMedium ? '55%' : '75%',
      transform: 'translate(-50%, -50%)',
      width: isFullscreen
        ? `${Math.min(windowSize.width * 0.25, 400)}px`
        : isSmall ? '250px' : isMedium ? '280px' : '370px',
      height: isFullscreen
        ? `${Math.min(windowSize.height * 0.3, 300)}px`
        : isSmall ? '180px' : isMedium ? '200px' : '200px',
      zIndex: 2,
      transition: 'all 0.3s ease-in-out'
    }),

    lineChartBox: (isSmall: boolean, isMedium: boolean) => ({
      width: '100%',
      height: '100%',
      padding: isSmall ? '8px' : isMedium ? '12px' : '16px',
      boxSizing: 'border-box' as const,
      borderRadius: isSmall ? '8px' : isMedium ? '12px' : '16px',
      backdropFilter: 'blur(10px)',
      border: `1px solid ${CSS_VARIABLES.BORDER_COLOR}`,
      transition: 'all 0.3s ease-in-out',
      overflow: 'hidden'
    }),

    fullscreenButton: {
      position: 'fixed' as const,
      top: '20px',
      right: '20px',
      zIndex: 1000,
      backgroundColor: 'rgba(0, 32, 64, 0.8)',
      border: `1px solid ${CSS_VARIABLES.BORDER_COLOR}`,
      borderRadius: '4px',
      padding: '8px',
      cursor: 'pointer',
      transition: 'all 0.3s ease-in-out',
      color: '#fff',
      '&:hover': {
        backgroundColor: 'rgba(0, 64, 128, 0.8)',
      }
    }
  };

  // 在 Datavisualization 组件内添加
  const getLineChartOption = useMemo(() => {
    const fontSize = isSmall ? 12 : isMedium ? 14 : 16;
    const itemCount = isSmall ? 5 : isMedium ? 7 : 10;

    // 使用 product 数据作为折线图数据
    const productData = data.productData.slice(0, itemCount);
    const xAxisData = productData.map((product: Product) => product.name); // 使用产品名称作为 x 轴数据
    const seriesData = productData.map((product: Product) => product.price); // 使用产品价格作为 y 轴数据

    return {
      title: {
        // text: '产品价格趋势',
        textStyle: {
          color: '#fff',
          fontSize: fontSize,
          fontWeight: 'normal'
        },
        left: 'center',
        top: 10
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: CSS_VARIABLES.PRIMARY_COLOR,
            width: 1,
            type: 'solid'
          }
        },
        textStyle: {
          color: '#fff',
          fontSize: fontSize - 2
        }
      },
      grid: {
        top: isSmall ? '15%' : '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: fontSize - 2,
          interval: 0,
          // 固定显示前两个字符
          formatter: (value: string) => {
            return value.length > 2 
              ? `${value.substring(0,2)}…`
              : value;
          },
          rich: {
            truncate: {
              width: isSmall ? 30 : isMedium ? 35 : 40,  // 调整为适合两个字的宽度
              overflow: 'truncate',
              ellipsis: '…'
            }
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: fontSize - 2
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      },
      series: [
        {
          data: seriesData,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: isSmall ? 6 : 8,
          lineStyle: {
            width: isSmall ? 2 : 3,
            color: CSS_VARIABLES.PRIMARY_COLOR
          },
          itemStyle: {
            color: CSS_VARIABLES.PRIMARY_COLOR,
            borderWidth: 2,
            borderColor: '#fff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(0, 255, 255, 0.3)' },
                { offset: 1, color: 'rgba(0, 255, 255, 0.1)' }
              ]
            }
          },
          // 添加数据标签并设置动态字体大小
          label: {
            show: true,
            color: '#fff',
            fontSize: fontSize - 2
          }
        }
      ]
    };
  }, [data.productData, isSmall, isMedium]);

  // 处理全屏切换
  const toggleFullscreen = useCallback(() => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      setIsFullscreen(true);
    } else {
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  }, []);

  // 监听全屏变化
  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []);

  // 添加全屏时的样式
  useEffect(() => {
    if (isFullscreen) {
      document.body.style.overflow = 'hidden';
      document.body.style.margin = '0';
      document.body.style.padding = '0';
    } else {
      document.body.style.overflow = '';
      document.body.style.margin = '';
      document.body.style.padding = '';
    }
  }, [isFullscreen]);

  return (
    <BorderBox11
      title="大屏实时数据动态展示"
      style={{
        ...styles.baseContainer,
        width: isFullscreen ? '100vw' : '100%',
        height: isFullscreen ? '100vh' : '100%',
        position: isFullscreen ? 'fixed' : 'relative',
        top: isFullscreen ? 0 : 'auto',
        left: isFullscreen ? 0 : 'auto',
        zIndex: isFullscreen ? 9999 : 'auto',
        margin: 0,
        padding: isFullscreen ? '20px' : '20px',
        boxSizing: 'border-box',
        transition: 'all 0.3s ease-in-out'
      }}
    >
      <div
        style={{
          position: 'fixed',
          top: '80px',
          right: '40px',
          zIndex: 1000,
          backgroundColor: 'rgba(0, 32, 64, 0.8)',
          border: `1px solid ${CSS_VARIABLES.BORDER_COLOR}`,
          borderRadius: '4px',
          padding: '8px',
          cursor: 'pointer',
          color: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'all 0.3s ease-in-out',
        }}
        onClick={toggleFullscreen}
      >
        {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
      </div>
      {/* Map Chart */}
      <div
        ref={containerRef}
        style={styles.mapContainer(windowSize, isFullscreen)}
      >
        <FlylineChartEnhanced
          config={mapConfig}
          style={styles.mapChart}
        />
      </div>

      {/* Scroll Board */}
      <div
        style={styles.scrollBoardContainer(isSmall, isMedium, isFullscreen)}
      >
        <BorderBox10
          style={styles.scrollBoardBox(isSmall, isMedium)}
        >
          <ScrollBoard
            config={scrollBoardConfig.config}
            style={scrollBoardConfig.style}
          />
        </BorderBox10>
      </div>

      {/* Active Ring Chart */}
      <div
        style={styles.activeRingContainer(isSmall, isMedium, isFullscreen)}
      >
        <BorderBox10
          style={styles.activeRingBox(activeRingChartConfig)}
        >
          <ActiveRingChart
            config={activeRingChartConfig}
            style={styles.activeRingChart}
          />
        </BorderBox10>
      </div>

      <div style={styles.lineChartContainer(isSmall, isMedium, isFullscreen)}>
        <BorderBox10 style={styles.lineChartBox(isSmall, isMedium)}>
          <ReactECharts
            option={getLineChartOption}
            style={{ width: '100%', height: '100%' }}
          />
        </BorderBox10>
      </div>

      {/* Scroll Ranking Board */}
      <div
        style={styles.scrollRankingContainer(isSmall, isMedium, isFullscreen)}
      >
        <BorderBox10
          style={styles.scrollRankingBox(isSmall, isMedium)}
        >
          <ScrollRankingBoard
            config={scrollRankingBoardConfig.config}
            style={scrollRankingBoardConfig.style}
          />
        </BorderBox10>
      </div>
    </BorderBox11>
  );
};

export default Datavisualization;
